<template>
	<view class="zai-box">
		<image src="../../static/logo.png" mode="" class="imgs"></image>
		<image src="../../static/ren.png" mode='aspectFit' class="zai-logo"></image>

		<view class="zai-form">
			<input class="zai-input" v-model="login.account" type="number" maxlength="11" placeholder="请输入用户名" />
			<input class="zai-input" v-model="login.password" password placeholder="请输入密码" />
			<view class="zai-label" @click="retrieve">忘记密码？</view>
			<button class="zai-btn" @tap="bindLogin()">立即登录</button>
			<view style="margin-top: 40rpx;">
				<button type="primary" @click="appLogin" class="weixin" plain="true">
					微信登陆
				</button>
			</view>

			<navigator url="./index" hover-class="none" class="zai-label" @click="register">还没有账号？点此注册.</navigator>
		</view>
	</view>
</template>

<script>
	import {
		postLogin,
		wxUserLogin
	} from "@/nxTemp/apis/login.js"
	export default {
		data() {
			return {
				login: {
					account: '15095043790',
					password: '123456'
				}

			};
		},
		methods: {
			bindLogin() {
				let that = this;
				if (this.login.account.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '账号不正确'
					});
					return;
				}
				if (this.login.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码不正确'
					});
					return;
				}
				postLogin(this.login).then(res => {

					uni.showToast({
						title: '登录成功！',
						icon: 'none'
					});
					//保存token到缓存
					uni.setStorageSync("token", res.token)
					//保存用户编号
					uni.setStorageSync("userId", res.id)
					uni.setStorageSync("user", res)
					that.$Router.pushTab({
						path: '/pages/taBar/social/social',
					});
				}).catch((res) => {

				})
			},
			appLogin: function() {
				let that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {

									console.log(JSON.stringify(loginRes));
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log(infoRes)
											console.log(infoRes.userInfo.openId)

											wxUserLogin(infoRes.userInfo.openId)
												.then(res => {
													uni.setStorageSync("token",
														res.token)
													uni.setStorageSync(
														"userId", res.id)
													uni.setStorageSync("user",
														res)
													that.$Router.pushTab({
														path: '/pages/taBar/social/social',
													});
												})
										}
									});
								},
								fail: function(res) {
									console.log("App微信获取用户信息失败", res);
								}
							});
						}
					}
				});
			},
			// 找回密码
			retrieve(){
				uni.navigateTo({
				    url: 'pages/login/retrieve'
				});

			},
			// 注册
			register(){
				uni.navigateTo({
				    url: 'pages/login/register'
				});
			}
		}
	}
</script>
<style>
	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		/* margin-top: 250rpx; */
		width: 100%;
		/* width: 100%; */
		height: 308upx;
	}

	.zai-form {
		margin-top: 100upx;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 0upx 40upx;
		font-size: 36upx;
		height: 80rpx;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		/* border-radius: 100upx; */
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
	.imgs{
		width: 182rpx;
		height: 56rpx;
		/* margin: auto; */
		text-align: center;
		margin-left: 196rpx;
	}
</style>
